<template>
	<view>
		 <u-sticky bgColor="#fff">
			<u-tabs :scrollable="false" :list="tabs" 
				:current="current"
				:activeStyle="{
				    color: '#303133',
				    fontWeight: 'bold',
				    transform: 'scale(1.05)'
				}"
				lineWidth="60rpx"
				lineHeight="8"
				lineColor="#303133"
				@change="tabsChange">
			</u-tabs>
		</u-sticky>
		
		<mescroll-body  ref="mescrollRef"   @init="mescrollInit" :height="height" :down="downOption"
			@down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
			<!-- 数据列表 -->
			<!-- 订单列表 -->
			<view v-for="(item,index) in list" :key="index" class="order-item"
				@click="openPage('pages/orders/orderDetail', {id: item.id})">
				<view class="i-top b-b">
					<text class="time">{{item.create_time}}</text>
					<text class="state" :style="{color: item.stateTipColor}">{{item.stateTip}}</text>
					<!-- <text 
				v-if="item.status===7" 
				class="del-btn yticon icon-iconfontshanchu1"
				@click="deleteOrder(index)"
			></text> -->
				</view>
		
				<scroll-view v-if="item.product.length > 1" class="goods-box" scroll-x>
					<view v-for="(goodsItem, goodsIndex) in item.product" :key="goodsIndex"
						class="goods-item">
						<image class="goods-img" :src="goodsItem.thumb" mode="aspectFill"></image>
					</view>
				</scroll-view>
				<view v-if="item.product.length === 1" class="goods-box-single"
					v-for="(goodsItem, goodsIndex) in item.product" :key="goodsIndex">
					<image class="goods-img" :src="goodsItem.thumb" mode="aspectFill"></image>
					<view class="right">
						<text class="title clamp">{{goodsItem.title}}</text>
						<text class="attr-box">{{goodsItem.product_sku_attr}} x {{goodsItem.quantity}}</text>
						<text class="price">{{goodsItem.product_price}}</text>
					</view>
				</view>
		
				<view class="price-box">
					共
					<text class="num">{{item.quantity}}</text>
					件商品 实付款
					<text class="price">{{item.pay_price}}</text>
				</view>
				<view class="action-box b-t" v-if="item.status == 1">
					<button class="action-btn" @click="cancelOrder(item)">取消订单</button>
					<button class="action-btn recom" @click="submit(item)">继续支付</button>
				</view>
				<view class="action-box b-t" v-if="item.status == 2">
					<button class="action-btn" @click="cancelOrder(item)">取消订单</button>
				</view>
			</view>
		</mescroll-body>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	import {orderSubmit, orderList, cancelOrder } from "../../common/shopmall.api.js"
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		data() {
			return {
				height: '',
				tabs: [{
					name: '全部',
					status: 0,
				}, {
					name: '待付款',
					status: 1,
				}, {
					name: '待收货',
					status: 2,
				}, {
					name: '待评价',
					status: 3,
				}],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				pagination: {
					auto: false,
					page: 1,
					pageSize: 10,
					total: 0,
				},
				upOption: {
					auto: false,
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: "没有更多数据了"
				},
				list: [],
				quantity: 0
			}
		},
		onLoad({
			current
		}) {
			this.height = (uni.getSystemInfoSync().windowHeight - uni.upx2px(80)) * 2 + 'rpx'
			this.current = current
			this.swiperCurrent = current * 1
			// #ifdef APP-PLUS
			this.getData()
			// #endif
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			console.log('下拉加载')
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index.index;
				this.pagination.page = 0;
				this.pagination.current = 1;
				this.pagination.status = index.status
				this.list = []
				this.mescroll.scrollTo(0)
				this.mescroll.setPageNum(1)
				this.mescroll.resetUpScroll();
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				// this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			openPage(path, params = {}) {
				this.$u.route({
					url: path,
					params
				})
			},
			//订单状态文字和颜色
			orderStateExp(state) {
				let stateTip = '',
					stateTipColor = '#fa436a';
				switch (+state) {
					case 1:
						stateTip = '待付款';
						break;
					case 2:
						stateTip = '待发货';
						break;
					case 3:
						stateTip = '已发货';
						break;
					case 4:
						stateTip = '已收货';
						break;
					case 5:
						stateTip = '已完成';
						break;
						stateTipColor = '#21bb18';
					case 7:
						stateTip = '已取消';
						stateTipColor = '#909399';
						break;

						//更多自定义
				}
				return {
					stateTip,
					stateTipColor
				};
			},
			getData() {
				let that = this;
				orderList({
					page:this.pagination.page,
					pageSize: this.pagination.pageSize,
					status: this.swiperCurrent
				}).then(res => {
					that.mescroll.endBySize(res.data.length, res.pagination.total)
					that.pagination = res.pagination;
					if (this.pagination.page == 1) {
						that.list = res.data
					} else {
						that.list = [...that.list, ...res.data]
					}
					for (let i = 0; i < that.list.length; i++) {
						that.list[i] = Object.assign(that.list[i], that.orderStateExp(that.list[i].status));
						// for (let j = 0; j < that.list[i].order_goods.length; j++) {
						// 	that.list[i].quantity = parseInt(that.quantity) + parseInt(that.list[i].order_goods[j]
						// 		.quantity)
						// }
					}

					that.pagination.page++
				})

			},
			upCallback() {
				this.pagination.page += 1;
				this.getData()
			},
			downCallback() {
				this.pagination.page = 1;
				this.getData()
				this.mescroll.resetUpScroll();
			},
			//点击空布局按钮的回调
			emptyClick() {
				uni.showToast({
					title: '点击了按钮,具体逻辑自行实现'
				})
			},
			submit(item) {
				let that = this;
				orderSubmit({
					order_id: item.id,
				}).then(res => {
					that.$u.route({
						url: "pages/pay/pay",
						params: {
							data: JSON.stringify(res)
						}
					})
				})
			},
			cancelOrder(item) {
				let that = this;
				cancelOrder({
					order_id: item.id,
				}).then(res => {
					for (let i = 0; i < that.list.length; i++) {
						if (that.list[i].id == item.id) {
							that.list[i].status = 7
						}

						that.list[i] = Object.assign(that.list[i], that.orderStateExp(that.list[i].status));
					}
					uni.showToast({
						title: '取消成功'
					})
				})
			}
		}
	}
</script>

<style>
	body {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss">
	.g-item {
		display: flex;
		margin: 20upx 30upx;

		image {
			flex-shrink: 0;
			display: block;
			width: 140upx;
			height: 140upx;
			border-radius: 4upx;
		}

		.right {
			flex: 1;
			padding-left: 24upx;
			overflow: hidden;
		}

		.title {
			font-size: 30upx;
			color: $font-color-dark;
		}

		.spec {
			font-size: 26upx;
			color: $font-color-light;
		}

		.price-box {
			display: flex;
			align-items: center;
			font-size: 32upx;
			color: $font-color-dark;
			padding-top: 10upx;

			.price {
				margin-bottom: 4upx;
			}

			.number {
				font-size: 26upx;
				color: $font-color-base;
				margin-left: 20upx;
			}
		}

		.step-box {
			position: relative;
		}
	}

	.order-item {
		display: flex;
		flex-direction: column;
		padding-left: 30upx;
		background: #fff;
		margin-top: 16upx;

		.i-top {
			display: flex;
			align-items: center;
			height: 80upx;
			padding-right: 30upx;
			font-size: $font-base;
			color: $font-color-dark;
			position: relative;

			.time {
				flex: 1;
			}

			.state {
				color: $base-color;
			}

			.del-btn {
				padding: 10upx 0 10upx 36upx;
				font-size: $font-lg;
				color: $font-color-light;
				position: relative;

				&:after {
					content: '';
					width: 0;
					height: 30upx;
					border-left: 1px solid $border-color-dark;
					position: absolute;
					left: 20upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		/* 多条商品 */
		.goods-box {
			height: 160upx;
			padding: 20upx 0;
			white-space: nowrap;

			.goods-item {
				width: 120upx;
				height: 120upx;
				display: inline-block;
				margin-right: 24upx;
			}

			.goods-img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		/* 单条商品 */
		.goods-box-single {
			display: flex;
			padding: 20upx 0;

			.goods-img {
				display: block;
				width: 120upx;
				height: 120upx;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30upx 0 24upx;
				overflow: hidden;

				.title {
					font-size: $font-base + 2upx;
					color: $font-color-dark;
					line-height: 1.5;
				}

				.attr-box {
					font-size: $font-sm + 2upx;
					color: $font-color-light;
					padding: 10upx 12upx;
				}

				.price {
					font-size: $font-base + 2upx;
					color: $font-color-dark;

					&:before {
						content: '￥';
						font-size: $font-sm;
						margin: 0 2upx 0 8upx;
					}
				}
			}
		}

		.price-box {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 20upx 30upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;

			.num {
				margin: 0 8upx;
				color: $font-color-dark;
			}

			.price {
				font-size: $font-lg;
				color: $font-color-dark;

				&:before {
					content: '￥';
					font-size: $font-sm;
					margin: 0 2upx 0 8upx;
				}
			}
		}

		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100upx;
			position: relative;
			padding-right: 30upx;
		}

		.action-btn {
			width: 160upx;
			height: 60upx;
			margin: 0;
			margin-left: 24upx;
			padding: 0;
			text-align: center;
			line-height: 60upx;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			background: #fff;
			border-radius: 100px;

			&:after {
				border-radius: 100px;
			}

			&.recom {
				background: #fff9f9;
				color: $base-color;

				&:after {
					border-color: #f7bcc8;
				}
			}
		}
	}
</style>
